<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他样式</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            padding: 10px;
            border: 10px solid yellow;
        }
        #box2{
            padding: 100px;
            background-color: #bfa;
        }
        #box4{
            width: 200px;
            height: 300px;
            background-color:darkgray;
            overflow:auto;
        }
        #box5{
            width: 500px;
            height: 600px;
            background-color: #FF8F00;

        }
    </style>
    <script>
        window.onload=function () {
            var box1=document.getElementById("box1");
            var btn01=document.getElementById("btn01");
            var box4=document.getElementById("box4");
            btn01.onclick=function () {
                // alert(box1.clientWidth);
                // alert(box1.offsetHeight);//140
                // alert(box1.offsetWidth);//140
                var op=box1.offsetParent;
                // alert(op.id);//box2
                // alert(box1.offsetLeft);//100
                // alert(box1.offsetTop);//100
                // alert(box4.clientHeight);//300
                // alert(box4.scrollHeight);//600
                // alert(box4.scrollLeft);//随着滚动条的移动 值也会有变化
                alert(box4.scrollTop);
            }
        }
    </script>
</head>
<body>
<script>
    /*1.clientWidth和clientHeight 可以获取元素的可见宽度 和高度 这些属性不带px返回的都是一个数字可以进行计算
    *       包括内容区   内边距 不包括边框
    *2.offsetWidth和offsetHeight 获取元素整个的宽度和高度
    *       包括内容区   内边距padding  边距border
    *3.offsetParent 获取当前元素的定位父元素 会获取到离当前元素最近的开启 了定位的祖先元素
    *               如果都没开启 则返回body
    *4.offsetLeft和offsetTop当前元素相对于其定位元素水平偏移量和垂直偏移量
    *5.scrollHeight和scrollWidth 获取元素整个滚动区域的高度和宽度
    *6.scrollLeft可以获取水平滚动条滚动的距离
    *7.scrollTop可以获取垂直滚动条的滚动的距离
    *
    * *scrollHeight-scrollTop==clientHeight  当满足这个条件时，说明垂直滚动条滚动到底了
    * scrollWidth-scrollLeft==clientWidth 当满足当前这个条件时，说明水平滚动条滚动到底
    *
    *
    *
    *
    *
    * */
</script>
<button id="btn01">点我一下</button>
<br /><br />
<div id="box4">
    <div id="box5"></div>
</div>
<br /><br />
<br /><br />
<br /><br />
<div id="box3" style="position:relative;">
    <div id="box2" style="position: relative">
        <div id="box1"></div>
    </div>
</div>
</body>
</html>